<template>
  <div>
    <div class="inner-user" v-if="isShowUser">
      <div>
        <div class="user-header">人物信息</div>
        <div class="user-content">
          <div class="content-left">
            <img src="@/assets/images/property/icon_man.png" alt="" />
          </div>
          <div class="content-right">
            <ul>
              <li>
                <span>姓名</span>
                <span>{{ userTaskInfo.name }}</span>
              </li>
              <li>
                <span>手机号</span>
                <span>{{ userTaskInfo.mobile }}</span>
              </li>
              <li>
                <span>角色</span>
                <span>{{ userTaskInfo.role }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <div class="user-header border-top">巡检执行效率</div>
        <div class="user-content">
          <div class="content-left-chart">
            <EfficiencyChart :userTaskInfo="userTaskInfo"></EfficiencyChart>
          </div>
          <div class="content-right">
            <ul>
              <li>
                <div><span class="legeng complete"></span>完成</div>
                <span>{{ userTaskInfo.completeTaskCount }}</span>
              </li>
              <li>
                <div><span class="legeng overtime"></span>超时</div>
                <span>{{ userTaskInfo.completeWithOverTimeTaskCount }}</span>
              </li>
              <li>
                <div><span class="legeng nocomplete"></span>未完成</div>
                <span>{{ userTaskInfo.notCompleteTaskCount }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div>
        <div class="user-header border-top">巡检异常/无异常对比</div>
        <div class="user-content">
          <ul class="normal-content">
            <li class="normal-header">
              <span>正常</span>
              <div>
                <span>
                  <span>{{ `${getPercent(userTaskInfo.normalTaskRate)}%` }}</span>
                </span>
                <span class="normal-per">{{ userTaskInfo.normalTaskCount }}</span>
              </div>
            </li>
            <li>
              <el-progress
                color="#7ED321"
                :show-text="false"
                :percentage="getPercent(userTaskInfo.normalTaskRate)"
              ></el-progress>
            </li>
            <li class="normal-header">
              <span>异常</span>
              <div>
                <span>{{ `${getPercent(userTaskInfo.exceptionTaskRate)}%` }}</span>
                <span class="normal-per">{{ userTaskInfo.exceptionTaskCount }}</span>
              </div>
            </li>
            <li>
              <el-progress
                color="#FF4D72"
                :show-text="false"
                :percentage="getPercent(userTaskInfo.exceptionTaskRate)"
              ></el-progress>
            </li>
          </ul>
        </div>
      </div>
      <div class="urer-bottom" @click="() => (isShowUser = false)">
        <span>关闭窗口</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserTaskData } from '../../js/patrol'
import EfficiencyChart from './EfficiencyChart'

export default {
  components: { EfficiencyChart },
  data () {
    return {
      isShowUser: false,
      userTaskInfo: {}
    }
  },
  props: {
    userNo: {
      type: String,
      required: false,
      default: ''
    }
  },
  methods: {
    open () {
      this.isShowUser = !this.isShowUser
      if (this.isShowUser) {
        this.getUserTaskData()
      }
    },
    async getUserTaskData () {
      const { code, data, msg } = await getUserTaskData({ userNo: this.userNo })
      if (code === 0) {
        this.userTaskInfo = data
      } else {
        this.$message.warning(msg)
      }
    },
    getPercent (val) {
      if (val || val === 0) {
        return val.toFixed(2) * 100
      }
    },
    close () {
      this.isShowUser = false
    }
  }
}
</script>
<style lang="scss">
.inner-user {
  .complete {
    background: #41dec5;
  }
  .overtime {
    background: #fbb31a;
  }
  .nocomplete {
    background: #fb5f1a;
  }
  div {
    box-sizing: border-box;
  }
  color: #6f6f8c;
  position: absolute;
  width: 3.2rem;
  height: 5.6rem;
  background: #ffffff;
  top: 0;
  left: -3.4rem;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  .user-header {
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 14px;
    text-align: center;
    color: #6f6f8c;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .border-top {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .user-content {
    padding: 0.2rem 0.25rem;
    display: flex;
    .content-left {
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content-left-chart {
      width: 1rem;
      height: 1rem;
    }
    .content-right {
      margin-left: 0.1rem;
      flex: 1;
      ul {
        li {
          box-sizing: border-box;
          padding: 0 5px;
          height: 0.3rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          span:nth-child(1) {
            color: #9191af;
          }
        }
      }
      .legeng {
        display: inline-block;
        width: 0.08rem;
        height: 0.08rem;
        margin-right: 0.09rem;
      }
    }
  }
  .normal-content {
    width: 100%;
    li {
      padding: 0.04rem 0;
    }
    .normal-header {
      display: flex;
      flex: 1;
      justify-content: space-between;
      .normal-per {
        padding: 0 5px 0 25px;
      }
    }
    /deep/ .el-progress-bar__outer {
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 0;
    }
    /deep/ .el-progress-bar__inner {
      border-radius: 0;
    }
  }
  .urer-bottom {
    cursor: pointer;
    margin: 0 0.25rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    background-color: rgba(220, 225, 238, 0.4);
    border-radius: 5px;
  }
}
</style>
